<template>
  <div>
    <table border="1px">
      <caption>个人简历</caption>
      <tr>
        <td>照片:</td>
        <td>
          <img :src="src" alt="" width="100px">
<!--            <img v-if="show" src="../../public/fcq.png" alt="" width="100px">-->
        </td>
      </tr>
      <tr>
        <td>姓名:</td>
        <td>{{name}}</td>
      </tr>
      <tr>
        <td>年龄:</td>
        <td>{{age}}</td>
      </tr>
      <tr>
        <td>好友:</td>
        <td style="width: 50px;">
          <ul v-if="show">
            <li v-for="item in friends">{{item}}</li>
          </ul>
        </td>
      </tr>
    </table>

    <button @click="sub" v-if="!show">{{but}}</button>
    <button @click="rut" v-else>{{but}}</button>
  </div>
</template>
<script setup>
import {ref} from "vue";

let show =ref(false);
const src = ref('');
const name = ref('');
const age = ref('');
const friends = ref([])
let but = ref('点击加载数据')

const sub = () => {
  src.value='fcq.png';
  // src.value=require('../../public/fcq.png');

  name.value='范传奇';
  age.value = 18;
  friends.value.push('小明','小红','小刚','小兰')
  show = true
  but ='点击清空数据'

  console.log(friends.value)
}
const rut = () => {
  src.value='';
  name.value='';
  age.value = '';
  friends.value=[]
  show = false
  but = '点击加载数据'

  // console.log(friends.value)
}

</script>

<style scoped>

</style>